<template>
  <div>
    <n-form ref="formRef" :model="model" label-placement="left" label-width="auto">
      <n-form-item label="userName" path="userName">
        <n-input v-model:value="model.userName" placeholder="user" />
      </n-form-item>

      <n-form-item label="password" path="password">
        <n-input type="password" v-model:value="model.password" placeholder="password" />
      </n-form-item>
    </n-form>

    <n-button @click="submitHandle">{{ submitText }}</n-button>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import type { FormInst } from 'naive-ui'
import { userStore } from '@/stores/modules/user';
const router = useRouter();
const userConstStore = userStore();

const model = ref({
  userName: 'admin',
  password: 'tIck_20140513',
})
const submitText = ref<string>("登录");
const formRef = ref<FormInst | null>(null)

const submitHandle = () => {
  submitText.value = "登录中...";
  formRef.value?.validate((errors) => {
    if (!errors) {
      let { userName, password } = model.value
      userConstStore.login({ userName: userName, password: password }).then((res: any) => {
        console.log('res :>> ', res);
        if (res.success) {
          userConstStore
            .getRouter({ userName: userName, password: password })
            .then((res: any) => {
              if (res.success) {
                router.push("/");
                submitText.value = "登录";
              }
            })
            .catch(() => {
              submitText.value = "登录";
            });
        }
      });
    }
  })

}

</script>
<style scoped lang="less"></style>